<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>

<body>
    <!--
    1.Vue中常用的按键别名;@keydown.enter.y表示按下enter或者y都会触发
        回车=>enter
        删除=>delete(捕获“删除”和“退格”键)
        退出=>esc
        空格=>space
        换行=> tab  提示:tab换行键只能搭配@keydown使用，否则就换切换焦点而导致无法正确触发事件
        上=>up
        下=> down
        左=>left
        右=> right
    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名) 例:caps-lock
    3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
        (1).配合keyup使用:按下修饰健的同时，再按下其他健，随后释放其他键，事件才被触发。(@keydown.ctrl.y)表示只有按下ctrl+y，在y松开时才触发
        (2).配合keydown使用:正常触发事件。
    4.也可以使用keyCode去指定具体的按键（不推荐)@keydown.13,因为不同键盘编码有可能不统一
    5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
    -->
    <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <input type="text" placeholder="输入文字" @keydown.enter.y="showInfo">
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'mimi'
        },
        methods: {
            showInfo(e) {
                /* if (e.key === 'Enter') { */ //用按键别名代替了
                console.log(e.target.value);
                /*   }*/

            }
        }
    });
</script>

</html>